7<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
        <style>
        .empty {
            text-align: center;
            padding: 0px;
            //background-color: #F1EFEF;
        }

        .topimg {
            width: 100%;
            height: 160px;
        }
        .topimg span {
  				padding: 5px 15px;
  				margin: 10px;
  				display: inline-block;
  				background-color: #e8e8e8;
  			}
        .topimg img {
            width: 300px;
            height: 120px;
            border: 1px solid red;
        }

        .nav {
            width: 360px;
            height: 40px;
            border-radius: 6px;
            border: 1px solid #000080;
            margin: 2px auto;
        }

        .navli {
            width: 33%;
            height: 30px;
            line-height: 30px;
            margin: 5px 0px;
            float: left;
            //border: 1px solid #000080;
        }

        .good {
            width: 350px;
            height: auto;
            border-radius: 6px;
            border: 1px solid #000080;
            margin: 2px auto;
        }

        .goodlist {
            font-size: 10px;
            display: block;
            width: 340px;
            height: auto;
            margin: 5px;
            border-radius: 6px;
            border: 1px solid #1212b1;
            float: left;
        }

        .goodlist li {
            width: 130px;
            height: 120px;
            margin: 10px 20px;
            float: left;
            border-radius: 10px;
            background-color: #fcfefe;
        }

        .goodlist li img {
            border-radius: 6px;
            width: 110px;
            height: 60px;
            margin: 5px 10px 0px 10px;
        }

        .goodlist span {}
    </style>
</head>

<body>
    <div class="empty">
        <div class="topimg">
          <h1>UIScrollPicture</h1>
        </div>
        <div class="nav">
            <div class="navli" onclick="open_techan();">土特产</div>
            <div class="navli" onclick="open_waimai();">美食外卖</div>
            <div class="navli" onclick="open_chaoshi();">超市商品</div>
        </div>


        <div class="good">
            <ul class="goodlist" id="goodlist"></ul>
      </div>

    </div>
</body>
</html>

<script type="text/javascript" src="../script/SHA1.js"></script>
<script type="text/javascript" src="../script/doT.min.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/x-dot-template" id="tmpl-4">
{{ for(var prop in it) { }}
  <li onclick="Win_goods('{{=it[prop].id}}')" >
      <span>{{=it[prop].cname}}</span>
      <img src="{{=it[prop].cimage.url}}">
      <span>价格：￥{{=it[prop].cprice}}</span><br>
      <span>销量：{{=it[prop].amount}}</span>
  </li>
{{ } }}
</script>
<script type="text/javascript">


      var dialogBox;
      var UIScrollPicture;
      apiready = function(){
     /*dialogBox弹出登录窗口 start*/
     init_UIScrollPicture();
     init_commoditydata();

     init_dbgoodsdata();

     init_eventlistener();
     }

     function init_commoditydata(){
     //将商品数据从数据库中拿出来
    //获取X-APICloud-AppKey值
    var now = Date.now();
   appKey = SHA1("A6032422409194"+"UZ"+"808CF36B-60D4-DC5D-C9F3-FB49F9E1FB44"+"UZ"+now)+"."+now

   var params = {
       fields: {},
       skip: 0,
       limit: 20
   }

   //将json转换成string
   params = $api.jsonToStr(params);

   api.ajax({
       url: 'https://d.apicloud.com/mcm/api/commodity?filter=' + params,
       method: 'get',
       cache: false,
       headers:{
         "X-APICloud-AppId": "A6032422409194",
         "X-APICloud-AppKey": appKey
       }
   },function(ret, err){
       if (ret) {
           $api.setStorage('commodity', ret);
           tmpltxt=doT.template(document.getElementById("tmpl-4").innerHTML);//生成模板方法
           document.getElementById("goodlist").innerHTML=tmpltxt(ret);//数据渲染
       } else {
           alert('数据库连接失败');
       }
   });

     }

     function init_UIScrollPicture(){
       UIScrollPicture = api.require('UIScrollPicture');

         /*轮播图 start*/

         UIScrollPicture.open({
           rect : {
             x : 0,
             y : 0,
             w : api.winWidth,
             h : 160
           },
           data : {
             paths : ['widget://image/1.jpg', 'widget://image/2.jpg', 'widget://image/3.jpg'],
           },
           styles : {
             caption : {
               height : 35,
               color : '#E0FFFF',
               size : 13,
               bgColor : '#696969',
               position : 'bottom'
             },
             indicator : {
               align : 'center',
               color : '#FFFFFF',
               activeColor : '#DA70D6'
             }
           },
           placeholderImg : 'widget://image/row.jpg',
           contentMode : 'scaleToFill',
           interval : 3,
           loop : true,
           fixedOn: api.frameName,
           fixed : false
         }, function(ret, err) {

         });

         /*轮播图 end*/
     }

      function init_dbgoodsdata(){
        userInfor= $api.getStorage('userInfor');
       //打开或者创建db数据库用来保存购物车中商品的id
       var db = api.require('db');
       db.openDatabase({
       name: userInfor.id
      }, function(ret, err) {
       if (ret.status) {
       //alert('db数据库创建成功');
       //创建一个表用来保存商品id
       db.executeSql({
        name: userInfor.id,
        sql: "CREATE TABLE goods(goodId varchar(255),goodCount int,goodState varchar(255) default 'off')"
      }, function(ret, err) {
      if (ret.status) {
       } else {}
      });
      } else {
       alert('数据库创建失败');
      }
      });

      }

      function init_eventlistener(){
        api.addEventListener({
            name: 'updateCommity'
        }, function(ret, err){
            if( ret ){

              tmpltxt=doT.template(document.getElementById("tmpl-4").innerHTML);//生成模板方法
              document.getElementById("goodlist").innerHTML=tmpltxt(ret.value.Commity);//数据渲染
                //  init_commoditydata();
            }else{}
        });
      }

      function open_register() {
      		api.openWin({
      		        name: 'register',
      		        url: 'register.html',
      		        opaque: true,
      		        vScrollBarEnabled: false
      		});
      }

      function open_login() {
      		api.openWin({
      		        name: 'login',
      		        url: 'login.html',
      		        opaque: true,
      		        vScrollBarEnabled: false
      		});
      }

      function Win_goods(commodity_id) {
        api.openWin({
            name: 'goods',
            url: 'frame0/spxqy.html',
            opaque: true,
            vScrollBarEnabled: false,
            pageParam: {
                wareId: commodity_id
            }
        });
      }

      function open_techan(variety_id){
        api.openWin({
            name: 'techan',
            url: 'frame0/splby.html',
            opaque: true,
            vScrollBarEnabled: false,
            pageParam: {
                variety:'ttc'
            }
        });

      }

      function open_waimai(){
        api.openWin({
            name: 'techan',
            url: 'frame0/splby.html',
            opaque: true,
            vScrollBarEnabled: false,
            pageParam: {
                variety:'mswm'
            }
        });

      }

      function open_chaoshi(){
        api.openWin({
            name: 'techan',
            url: 'frame0/splby.html',
            opaque: true,
            vScrollBarEnabled: false,
            pageParam: {
                variety:'csyp'
            }
        });

      }




</script>
